<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>

    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
    <style type="text/css">
        #swiper-container3{
            height: 100%;
        }
        #swiper-container3 .swiper-slide{

        }
    </style>

</head>

<body>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header" style="margin-bottom: 0;">
        <!--<div class="head-back">-->
            <!--<a href="javascript:void(0);" tapmode onclick="commonUrl('circle_all')" class="to-circle"></a>-->
        <!--</div>-->
        <div class="head-title" id="doubleClick">
            <ul>
                <li class="on " data-load="true">关注</li>
                <li class="" data-load="false">推荐</li>
            </ul>
        </div>
        <div class="head-action">
            <a href="javascript:void(0);" tapmode onclick="commonUrl('circle_all')" class="to-circle"></a>
            <!--<a href="javascript:void(0);" tapmode onclick="commonUrl('follow_school')" class="action-btn"></a>-->
        </div>
    </div>
</div>
<!-- header end -->

<div class="swiper-container" id="swiper-container3">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="school-circle mescroll" id="mescroll" style="padding: 1.5rem 0.3rem 0;">
                <div class="school-circle-list">
                    <div class="common-title">
                        <h6 class="circle-name"><em id="circleName0" style="font-weight: bold;">我的圈子</em><span class="circle-num">(0个)</span>
                        </h6>
                        <a href="javascript:void(0)" tapmode onclick="commonUrl('my_circle')" class="more my-circle">更多> </a>
                    </div>
                    <ul id="circleList0">
                        <!--<li onclick="commonUrl('circle_index')" tapmode>
                            <div class="circle-img bg-cover" style="background: url('../../image/img-media01.png')"></div>
                            <p class="multiline-ellipsis">娱乐</p>
                        </li>-->
                    </ul>
                </div>
                <div class="circle-dynamic">
                    <div class="common-title">
                        <h6>动态</h6>
                        <!--<a href="javascript:void(0)" tapmode onclick="commonUrl('dynamic_list')" class="more">更多> </a>-->
                    </div>
                    <div class="index-news user-dynamic">
                        <ul id="content0">

                        </ul>

                        <div class="t-c pt40 pb60 c-999 f26" id="nomore1" style="display: none;">没有更多了</div>
                    </div>
                </div>

            </div>

        </div>

        <div class="swiper-slide">
            <div class="school-circle mescroll" id="mescroll2" style="padding: 1.5rem 0.3rem 0;">

                <div class="school-circle-list">
                    <div class="common-title">
                        <h6 class="circle-name"><em id="circleName1" style="font-weight: bold;">推荐圈子</em></h6>
                        <a href="javascript:void(0)" tapmode onclick="commonUrl('find_circle')" class="more find-circle">更多> </a>
                    </div>
                    <ul id="circleList1">
                        <!--<li onclick="commonUrl('circle_index')" tapmode>
                            <div class="circle-img bg-cover" style="background: url('../../image/img-media01.png')"></div>
                            <p class="multiline-ellipsis">娱乐</p>
                        </li>-->
                    </ul>
                </div>
                <div class="circle-dynamic">
                    <div class="common-title">
                        <h6>动态</h6>
                        <!--<a href="javascript:void(0)" tapmode onclick="commonUrl('dynamic_list')" class="more">更多> </a>-->
                    </div>
                    <div class="index-news user-dynamic">
                        <ul id="content1">

                        </ul>
                        <div class="t-c pt40 pb60 c-999 f26" id="nomore2" style="display: none;">没有更多了</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>



<!-- 底部导航 -->
<div id="footer" class="border-t">
    <ul class="flex-wrap">
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">首页</li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active">圈子</li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">
            <div class="school-logo">
                <img id="school_path" src="" alt="">
            </div>
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">在看</li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">我的</li>
    </ul>
</div>

</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript">
    var pullUp = true;
    var page = 1;//页码
    var type = 1;//导航类型： 关注、推荐
    apiready = function () {

        setFixStatusBar(); //设置状态栏

        $('#school_path').attr('src', $api.getStorage('schoolPath'));

        api.addEventListener({
            name: 'invitation'
        }, function (ret, err) {
            page = 1;
            getCircleIndex()
        });

        api.addEventListener({
            name: 'shield'
        }, function (ret, err) {
            page = 1;
            getCircleIndex()
        });

        api.addEventListener({
            name: 'schoolPathStatus'
        }, function (ret, err) {
            $('#school_path').attr('src', $api.getStorage('schoolPath'));
        });

        //监听访问圈子
        api.addEventListener({
            name: 'follow_Circle'
        }, function (ret, err) {
            type = 1;
            getCircleList()
        });

        //刷新监听
        api.addEventListener({
            name: 'refresh'
        }, function (ret, err) {
            page = 1;
            getCircleIndex()
        });

        //发布活动返回监听刷新
        api.addEventListener({
            name: 'activity'
        }, function (ret, err) {
            page = 1;
            getCircleIndex()
        });


        //监听返回键
        // tabNavListener()


        ExitApp()


        getCircleList();
        getCircleIndex()


        isIosX()
    }

    var NavArr = [{"index": 0,"scroll_num": 0,'page': 1,'height': ''},{"index": 0,"scroll_num": 0,'page': 1,'height': ''}];
    var lastIndex = 0;
    var swiper3 = new Swiper('#swiper-container3',{
        observer:true,
        observeParents:true,
        spaceBetween: 25,
        followFinger: false,
        onSlideChangeStart: function(swiper){
            $(".head-title li").removeClass('on').eq(swiper.activeIndex).addClass('on');

            console.log(jsonChange(NavArr))
            lastIndex = swiper.activeIndex;
            console.log(lastIndex)

            page = NavArr[swiper.activeIndex].page;
            type = swiper.activeIndex + 1;
            console.log(type)

            var flag = $(".head-title li").eq(swiper.activeIndex).attr('data-load');
            console.log(flag)
            if(flag == 'false'){
                getCircleList();
                getCircleIndex();
            }
        }
    });

    //头部导航切换
    $(".head-title").on('click', 'li', function () {
        var _index = $(this).index();
        swiper3.slideTo(_index, 500)
    });


    //获取圈子列表
    function getCircleList(){
      var param = {
          token: $api.getStorage('token'),
          type: type,//类型：1关注 2推荐
      }
      getAjax(Interface.circle_list, param, function (res) {
          var circle = res.data.circle;
          // console.log(jsonChange(circle))

          if (isDefine(circle)) {
              var circleHtml = '';
              if (type == 1) {
                  $('.circle-num').html('(' + res.data.circle_count + '个)')
                  for (var i = 0; i < circle.length; i++) {
                      if (i < 5) {
                          var circle_id = {"circle_id": circle[i].id}
                          circleHtml += '<li tapmode onclick=\'commonUrl("circle_index",' + jsonChange(circle_id) + ')\'>' +
                              '                <div class="circle-img bg-cover" style="background: url(' + ajaxUrl + circle[i].icon_path + ')"></div>' +
                              '                <p class="multiline-ellipsis">' + circle[i].title + '</p>' +
                              '            </li>'
                      }

                  }
                  $("#circleList0").html(circleHtml)

              } else {
                  for (var k = 0; k < circle.length; k++) {
                      if (k < 5) {
                          var circle_id = {"circle_id": circle[k].id}
                          circleHtml += '<li tapmode onclick=\'commonUrl("circle_index",' + jsonChange(circle_id) + ')\'>' +
                              '                <div class="circle-img bg-cover" style="background: url(' + ajaxUrl + circle[k].icon_path + ')"></div>' +
                              '                <p class="multiline-ellipsis">' + circle[k].title + '</p>' +
                              '            </li>'
                      }
                  }
                  $("#circleList1").html(circleHtml)
              }

          } else {
              if (type == 1) {
                  $("#circleList").html('<p style="width: 100%;" class="t-c c-999">暂无关注圈子</p>')
              } else {
                  $("#circleList").html('<p style="width: 100%;" class="t-c c-999">暂无推荐圈子</p>')
              }
          }
      })

    }




    //获取关注，推荐的圈子动态
    function getCircleIndex() {
        var param = {
            token: $api.getStorage('token'),
            type: type,//类型：1关注 2推荐
            page: page,
        }
        console.log(jsonChange(param))
        pop.loading();
        getAjax(Interface.circle_dynamic, param, function (res) {
            console.log(type)
            // var circle = res.data.circle;
             console.log(JSON.stringify(res));
            var list = res.data.list;
            var listHtml = '';
            if (isDefine(list)) {
                $.each(list,function (i, item) {
                    if(item.leixing == 2){

                        listHtml += inviteGetHtml(item.data)

                    }else if(item.leixing == 3){

                        listHtml += getActivityText(item.data)

                    }else if(item.leixing == 5){

                        listHtml += voteGetHtml(item.data)

                    }

                })

                if(type == 1){

                    if (page == 1) {
                        console.log(listHtml)

                        $("#content0").html(listHtml)
                        $("#nomore1").hide();
                    } else {
                        $("#content0").append(listHtml)
                        $("#nomore1").hide();
                    }
                }else {
                    if (page == 1) {
                        $("#content1").html(listHtml)
                        $("#nomore2").show();
                    } else {
                        $("#content1").append(listHtml)
                        $("#nomore2").show();
                    }
                }


                page++;

                if(type == 1){
                    NavArr[0].page = page;
                }else {
                    NavArr[1].page = page;
                }
                pullUp = true;



            } else {

                if(type == 1){
                    if (page == 1) {
                        $("#content0").html(noData)
                    } else {
                        $("#nomore1").show();
                    }
                }else {
                    if (page == 1) {
                        $("#content1").html(noData)
                    } else {
                        $("#nomore2").show();
                    }
                }

                pullUp = false;
            }

            SystemCheckVersion()

            pop.close();
            mescroll.endErr();
            mescroll2.endErr();

        }, function (error) {
            pop.notice(error.msg)
            pop.close()
            mescroll.endErr();
            mescroll2.endErr();
        })
    }


    //关注、取消关注
    function followAction(stype, pid, that) {
        var type = 1;//类型：1会员 2圈子
        var className = '.class' + pid;
        follow(stype, type, pid, function (res) {
            if (stype == 1) {
                pop.notice('关注成功');
                // $(className).addClass('on')
                $(className).remove()
                // $(that).parents('.follow').addClass('on')
            } else {
                pop.notice('已取消关注');
                $(className).removeClass('on')
                // $(that).parents('.follow').removeClass('on')
            }
        })
    }

/*
    //投票功能 - 单选
    $(".index-news").on('click',".radioChoose li",function(){
        var _this = $(this);
        _this.addClass('on').siblings('li').removeClass('on');
        var _id = _this.attr('data-id');
        _this.parents('.radioChoose').siblings('.vote-action').find('.vote-btn').attr('data-id',_id);
    })


    //投票功能 - 多选
    $(".index-news").on('click',".checkChoose li",function(){
        var _this = $(this);
        var _this_id = _this.attr('data-id');
        var _thisP = _this.parents('.checkChoose');
        var _max = _thisP.attr('data-max');
        var _min = _thisP.attr('data-min');
        var _num = _thisP.find('.on').length;
        var vote = _this.parents('.choose').siblings('.vote-action').find('.vote-btn').attr('data-id');
        if(_this.hasClass('on')){
            if(_num >= _min){
                _this.removeClass('on');
                vote = vote.split(',');
                vote.splice($.inArray(_this_id, vote), 1).join(',');
                _this.parents('.choose').siblings('.vote-action').find('.vote-btn').attr('data-id',vote)
            }else {
                pop.notice('最少选择'+_min+'项')
            }
            _this.removeClass('on');
        }else {
            if(_num < _max){
                _this.addClass('on');
                if(_num == 0){
                    vote = _this_id;
                }else {
                    vote += ',' + _this_id;
                }
                _this.parents('.choose').siblings('.vote-action').find('.vote-btn').attr('data-id',vote)
            }else {
                pop.notice('最多选择'+_max+'项')
            }
        }
    })*/


    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: true, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            /*toTop:{ //配置回到顶部按钮
                src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }*/
            lazyLoad: {
                use: true, // 是否开启懒加载,默认false
                attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
                showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
                delay: 200, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
                offset: 500 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
            }
        }
    });
    var mescroll2 = new MeScroll("mescroll2", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: true, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            /*toTop:{ //配置回到顶部按钮
                src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }*/
            lazyLoad: {
                use: true, // 是否开启懒加载,默认false
                attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
                showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
                delay: 200, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
                offset: 500 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
            }
        }
    });

    /*下拉刷新的回调 */
    function downCallback() {
        page = 1;
        getCircleIndex()
        getCircleList()

        //mescroll.endErr();
    }

    /*上拉加载的回调 */
    function upCallback() {

        if (pullUp == true) {
            getCircleIndex()
        } else {
            mescroll.endErr();
            mescroll2.endErr();
        }
    }


</script>
